﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Select 下拉框演示</title>
    <link href="./lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="./lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="./disk/longbow-select.css" rel="stylesheet" />
    <style>
        html {
            font-size: 16px;
        }

        body {
            font-size: 0.875rem;
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
            font-weight: 400;
        }

        h2 {
            margin-top: 40px;
        }

        h3 {
            margin-top: 30px;
            font-weight: 400;
            font-size: 1.375rem;
        }

        h6 {
            margin-bottom: 1rem;
        }

        .gitee {
            position: absolute;
            top: 0;
            right: 0;
        }

        .card {
            margin-bottom: 20px;
            transition: box-shadow .2s;
        }

        .card:hover {
            box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
        }

        .card-body {
            padding-bottom: 0;
        }

        .form-inline .form-row {
            width: 100%;
        }

        .form-inline .form-group {
            margin-bottom: 16px;
        }

        .form-inline .form-group .control-label {
            margin-right: 10px;
            width: 90px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            justify-content: flex-start;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            background-color: #fff;
            font-size: 14px;
            margin-bottom: 45px;
            line-height: 1.5em;
        }

        th {
            text-align: left;
            white-space: nowrap;
            color: #909399;
            font-weight: 400;
            border-bottom: 1px solid #dcdfe6;
            padding: 15px;
            max-width: 250px;
        }

        td {
            color: #606266;
        }

        td,
        td {
            border-bottom: 1px solid #dcdfe6;
            padding: 15px;
            max-width: 250px;
        }

        td:first-child,
        th:first-child {
            padding-left: 10px;
        }

        .tip {
            padding: 8px 16px;
            background-color: #ecf8ff;
            border-radius: 4px;
            border-left: 5px solid #50bfff;
            margin: 20px 0;
        }

        pre {
            color: #e83e8c;
        }
    </style>
</head>

<body>
    <a href='https://gitee.com/LongbowEnterprise/longbow-select' class="gitee"><img
            src='https://gitee.com/LongbowEnterprise/longbow-select/widgets/widget_1.svg?color=50bfff'
            alt='Fork me on Gitee' /></a>
    <div class="container">
        <h2>Bootstrap Select 选择下拉框</h2>
        <p>当选项过多时，使用下拉菜单展示并选择内容。</p>
        <div class="tip">
            <h6>实现思路：</h6>
            <p>
                前台设置使用 <code>select</code> 初始化，组件内部将 <code>select</code> 替换为菜单项 <code>dropdown-menu</code>，使用
                <code>input</code> 代替 <code>select</code>
            </p>
            <p>
                转换前代码：
            </p>
            <pre>
    &lt;input class="form-control" data-toggle="lgbSelect" /&gt;
    &lt;select id="test" data-toggle="lgbSelect" class="d-none"&gt;
        &lt;option value="1"&gt;北京&lt;/option&gt;
        &lt;option value="2"&gt;上海&lt;/option&gt;
        &lt;option value="3"&gt;深圳&lt;/option&gt;
    &lt;/select&gt;
</pre>
            <p>
                转换后代码：
            </p>
            <pre>
    &lt;div data-toggle="lgbSelect" class="form-select dropdown"&gt;
        &lt;input type="hidden" data-toggle="lgbSelect" data-text="北京" value="1" id="test"&gt;
        &lt;input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" placeholder="请选择 ..."&gt;
        &lt;span class="form-select-append"&gt;&lt;i class="fa fa-angle-up"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;div class="dropdown-menu-arrow"&gt;&lt;/div&gt;
        &lt;div class="dropdown-menu"&gt;
            &lt;a class="dropdown-item active" href="#" data-val="1"&gt;北京&lt;/a&gt;
            &lt;a class="dropdown-item" href="#" data-val="2"&gt;上海&lt;/a&gt;
            &lt;a class="dropdown-item" href="#" data-val="3"&gt;深圳&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</pre>
            <p>
                特色：配合 <code>ASP.NET Core Razor</code> 引擎初始化下拉框组件后，客户端取值与赋值均由 <code>input</code> 来承担，非常方便
            </p>
            <p>
                取值代码：<code>$('#test').val()</code> 或者 <code>$('#text').attr('value')</code>
            </p>
            <p>
                取文本代码：<code>$('#text').attr('data-text')</code>
            </p>
            <p>
                赋值代码：<code>$('#test').lgbSelect('val', 1)</code>
            </p>
            <div><code>select</code> 标签前面的 <code>input</code> 控件为可选项，用途是页面呈现时占位所用，防止网速慢的情况下脚本更改页面元素时出现控件变换情况</div>
        </div>
        <h3>基本用法</h3>
        <p>适用广泛的基础单选</p>
        <div class="card">
            <div class="card-body">
                <div class="form-inline">
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <input class="form-control" data-toggle="lgbSelect" />
                            <select id="test" data-toggle="lgbSelect" class="d-none" name='sel_test'>
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">深圳</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test').lgbSelect();</code>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <select id="test8" data-toggle="lgbSelect">
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test8').lgbSelect('reset', [{ value: 1, text: '上海', selected: true }]);</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h3>禁用状态</h3>
        <p>选择器不可用状态</p>
        <div class="card">
            <div class="card-body">
                <div class="form-inline">
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <input class="form-control" data-toggle="lgbSelect" />
                            <select id="test1" data-toggle="lgbSelect" class="d-none">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">深圳</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test1').lgbSelect('disabled');</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h3>自定义边框</h3>
        <p>可以自定义边框颜色</p>
        <div class="card">
            <div class="card-body">
                <div class="form-inline">
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label class="control-label text-primary">Primary</label>
                            <input class="form-control" data-toggle="lgbSelect" />
                            <select id="test2" data-toggle="lgbSelect" class="d-none">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">深圳</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test2').lgbSelect({ borderClass: 'border-primary' });</code>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label class="control-label text-info">Info</label>
                            <input class="form-control" data-toggle="lgbSelect" />
                            <select id="test3" data-toggle="lgbSelect" class="d-none">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">深圳</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test3').lgbSelect({ borderClass: 'border-info' });</code>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label class="control-label text-success">Success</label>
                            <input class="form-control" data-toggle="lgbSelect" />
                            <select id="test4" data-toggle="lgbSelect" class="d-none">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">深圳</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test4').lgbSelect({ borderClass: 'border-success' });</code>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label class="control-label text-warning">Warning</label>
                            <input class="form-control" data-toggle="lgbSelect" />
                            <select id="test5" data-toggle="lgbSelect" class="d-none">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">深圳</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test5').lgbSelect({ borderClass: 'border-warning' });</code>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label class="control-label text-danger">Danger</label>
                            <input class="form-control" data-toggle="lgbSelect" />
                            <select id="test6" data-toggle="lgbSelect" class="d-none">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">深圳</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test6').lgbSelect({ borderClass: 'border-danger' });</code>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label class="control-label text-secondary">Secondary</label>
                            <input class="form-control" data-toggle="lgbSelect" />
                            <select id="test7" data-toggle="lgbSelect" class="d-none">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">深圳</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <code>$('#test7').lgbSelect({ borderClass: 'border-secondary' });</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h3>Select Optons</h3>
        <p>组件选项</p>
        <table>
            <thead>
                <tr>
                    <th>参数 </th>
                    <th>说明 </th>
                    <th>类型 </th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>placeholder</td>
                    <td>占位符</td>
                    <td>string</td>
                    <td>-</td>
                    <td>请选择 ...</td>
                </tr>
                <tr>
                    <td>borderClass</td>
                    <td>边框样式</td>
                    <td>string</td>
                    <td>border-primary/border-success/border-info/border-warning/border-danger</td>
                    <td>null</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan='5' class='text-right'>更多属性请 <a
                            href='https://gitee.com/LongbowEnterprise/longbow-select/issues'>Issues</a> 页面提出</td>
                </tr>
            </tfoot>
        </table>
        <h3>Events</h3>
        <p>组件事件</p>
        <table>
            <thead>
                <tr>
                    <th>事件</th>
                    <th>说明</th>
                    <th>示例</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>changed.lgbSelect</td>
                    <td>下拉框值变化时触发此事件</td>
                    <td><code>$('#test').on('changed.lgbSelect', function (e) { })</code></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan='5' class='text-right'>更多事件请 <a
                            href='https://gitee.com/LongbowEnterprise/longbow-select/issues'>Issues</a> 页面提出</td>
                </tr>
            </tfoot>
        </table>
        <h3>Methods</h3>
        <p>组件方法</p>
        <table>
            <thead>
                <tr>
                    <th>方法名</th>
                    <th>说明 </th>
                    <th>示例</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>val()</td>
                    <td>获取下拉框值</td>
                    <td><code>$('#test').val()</code></td>
                </tr>
                <tr>
                    <td>attr('data-text')</td>
                    <td>获取下拉框文本显示值</td>
                    <td><code>$('#test').attr('data-text')</code></td>
                </tr>
                <tr>
                    <td>lgbSelect('val', 1)</td>
                    <td>设置下拉框值</td>
                    <td><code>$('#test').lgbSelect('val', 1)</code></td>
                </tr>
                <tr>
                    <td>lgbSelect('disabled')</td>
                    <td>设置组件不可用</td>
                    <td><code>$('#test').lgbSelect('disabled')</code></td>
                </tr>
                <tr>
                    <td>lgbSelect('enable')</td>
                    <td>设置组件可用</td>
                    <td><code>$('#test').lgbSelect('enable')</code></td>
                </tr>
                <tr>
                    <td>lgbSelect('reset', val, init)</td>
                    <td>重置组件子项</td>
                    <td><code>$('#test').lgbSelect('reset', [ { value: 1, text: '上海', selected: true } ], false)</code>
                    </td>
                </tr>
                <tr>
                    <td>lgbSelect('get', function)</td>
                    <td>获取所有控件数据项</td>
                    <td><code>$('#test').lgbSelect('get', function (source) { data = source; })</code></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan='5' class='text-right'>更多方法请 <a
                            href='https://gitee.com/LongbowEnterprise/longbow-select/issues'>Issues</a> 页面提出</td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="./disk/longbow-select.js"></script>
    <script>
        $('#test').lgbSelect();
        $('#test1').lgbSelect('disabled');
        $('#test2').lgbSelect({ borderClass: 'border-primary' });
        $('#test3').lgbSelect({ borderClass: 'border-info' });
        $('#test4').lgbSelect({ borderClass: 'border-success' });
        $('#test5').lgbSelect({ borderClass: 'border-warning' });
        $('#test6').lgbSelect({ borderClass: 'border-danger' });
        $('#test7').lgbSelect({ borderClass: 'border-secondary' });
        $('#test8').lgbSelect('reset', [{ value: 1, text: '上海', selected: true }]);
    </script>
</body>

</html>